<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-parent></my-parent>
		</div>
		<template id="father">
			<div>
				<h3>搜索手机兄弟</h3>
				手机牌子:<input type="text" v-model="brand" />
				<mychild :name="brand" ></mychild>
			</div>
		</template>
		<template id="son">
			<ul>
				<li>手机品牌 {{show.brand}}</li>
				<li>手机型号 {{show.type}}</li>
				<li>手机价格 {{show.price}}</li>
			</ul>
		</template>
		<script>
			Vue.component('my-parent', {
				template: '#father',
				data() {
					return {
						brand: ''
					}
				}
			})
			Vue.component('mychild', {
				template: '#son',
				data() {
					return {
						content: [{
								brand: '华为',
								type: 'MAte20',
								price: 3699
							},
							{
								brand: '小米',
								type: '20',
								price: 3699
							},
							{
								brand: '苹果',
								type: 'MAX11',
								price: 3699
							},
							{
								brand: '三星',
								type: 'MAte20',
								price: 3699
							},
						],
						show: {
							brand: '',
							type: '',
							price: ''
						}
					}
				},
				props: ['name'],
				watch: {
					name() {
						if (this.$props.name) {
							let found = false
							this.content.forEach(item => {
								if (item.brand === this.$props.name) {
									found = item
								}
							})
							this.show = found ? found : {
								brand: '',
								type: '',
								price: ''
							}
						}else{
							return
						}
					}
				}
			})
			const app = new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>
